

let BaseView = require('./BaseView');

let templateDiv = `
<labe>物体信息</labe>
<div id="inspectContent" class="border">
        <!--<label>编辑</label> <label>编辑锚点</label><input id="editorAnchor" type="checkbox">-->
        <div>
            <!--<div>-->
                <!--<label>visible:</label><input id="_visible" type="checkbox"/>-->
            <!--</div>-->
            <div>
                <label>x:</label><input id="_x" class="mini_input" type="number">
                <label>y:</label><input id="_y" class="mini_input" type="number">
            </div>
            <div>
                <label>zIndex:</label>
                <input id="_zIndex" class="mini_input" type="number">
            </div>
            <div>
                angle:<input id="_angle" class="mini_input" type="number">
            </div>
            <!--<div>  -->
                <!--width:<input id="_width" class="mini_input" type="number"><br/>-->
                <!--height:<input id="_height" class="mini_input" type="number">-->
                <!--<button id="btn_reset_size">重置宽高</button>-->
            <!--</div>-->
            <hr/>
            <div>
                <label>桥/洞:</label><input type="checkbox" id="_holeOrBridge">
            </div>
            <div>
                <label>迷雾:</label><input type="checkbox" id="_fog">
            </div>
            <div>
                <label>低位Z:</label><input type="checkbox" id="_lowerZ">
            </div>
            <hr/>
            <div>
                <label>锚点X:</label><input id="_ax" class="mini_input" type="number" step="0.03" min="0" max="1">
                <label>锚点Y:</label><input id="_ay" class="mini_input" type="number" step="0.03" min="0" max="1">
            </div>
            <div>
                <label>alias:</label><input id="_alias" class="mid_input">
            </div>
            <div>
                <label>不透明度:</label><input id="_opacity" type="range" min="0" max="255" step="10">
            </div>
            <hr/>
            <div>
                <button id="_btn_del">删除</button>
            </div>
            <hr/>
        </div>
    </div>`;


require('./css/inspect.css');
let settings = require('../settings');

let doubleBind = require('../doubleBind');
let InspAnimView = require('./inspect/InspAnimView');

class InspectView extends  BaseView{
    constructor() {
        super();

        this.rootEl = document.createElement('div');
        this.rootEl.classList.add('border');
        this.rootEl.classList.add('inspect');
        this.rootEl.innerHTML = templateDiv;

        this.inspectContentEl = this.rootEl.querySelector('#inspectContent');

        let btnDelete = this.rootEl.querySelector('#_btn_del');
        btnDelete.addEventListener('click',this._onBtnDelete.bind(this),false);

        // let btnResetSize = this.rootEl.querySelector('#btn_reset_size');
        // btnResetSize.addEventListener('click',()=>{
        //     let selectedSp = this._selectedSp;
        //     if(selectedSp){
        //         let w = selectedSp.texture.width;
        //         let h = selectedSp.texture.height;
        //         selectedSp.setSize(w,h);
        //         this.model.width = w;
        //         this.model.height = h;
        //         editor.gameApp.showSelectedFlag();
        //     }
        // },false);

        // this.bEditorAnchor = false;
        // // 编辑锚点
        // this.editorAnchorEl = this.rootEl.querySelector('#editorAnchor');
        // this.editorAnchorEl.addEventListener('change',()=>{
        //     this.bEditorAnchor = this.editorAnchorEl.checked;
        // },false);

        // 指向 scene 的 selectSp
        this.bindModel();
        this.reset();

        // selectedsp
        this._selectedSp = null;
        this.hidePanel();

        // 将动画信息 加入到 inspectContentEl
        // trick:  为了方便  直接就加了
        this.inspAnimView = new InspAnimView();
        this.inspectContentEl.appendChild(this.inspAnimView.rootEl);
        this.inspAnimView.parentView = this;
        setTimeout(()=>{
            this.inspAnimView.initCaches();
        },20);
    }


    bindModel(){
        let self = this;
        let lst = [];
        lst.push({
            el:this.rootEl.querySelector('#_x'),
            name:'x',
            domName:'input',
            bNumber:true,
            filter:function(){
               if(self.inAnimating()){
                   self.model.x = self._selectedSp.node.x;
                   // alert('请先停止动画再进行编辑!');
                   editor.gameApp.hideSelectedFlag();
                   return false;
               }
               return true;
            },
            callback:function () {
                if(self._selectedSp){
                    self._selectedSp.node.x = self.model.x;
                    editor.gameApp.showSelectedFlag();
                }
            }
        });
        lst.push({
            el:this.rootEl.querySelector('#_y'),
            name:'y',
            domName:'input',
            bNumber:true,
            filter:function(){
                if(self.inAnimating()){
                    self.model.y = self._selectedSp.node.y;
                    // alert('请先停止动画再进行编辑!');
                    editor.gameApp.hideSelectedFlag();
                    return false;
                }
                return true;
            },
            callback:function () {
                if(self._selectedSp){
                    self._selectedSp.node.y = self.model.y;
                    editor.gameApp.showSelectedFlag();
                }
            }
        });
        lst.push({
            el:this.rootEl.querySelector('#_zIndex'),
            name:'zIndex',
            domName:'input',
            bNumber:true,
            filter:function(){
                if(self.inAnimating()){
                    self.model.zIndex = self._selectedSp.node.zIndex;
                    //alert('请先停止动画再进行编辑!');
                    editor.gameApp.hideSelectedFlag();
                    return false;
                }
                return true;
            },
            callback:function () {
                if(self._selectedSp){
                    self._selectedSp.node.zIndex = self.model.zIndex;
                    editor.gameApp.showSelectedFlag();
                }
            }
        });
        lst.push({
            el:this.rootEl.querySelector('#_angle'),
            name:'degress',
            domName:'input',
            bNumber:true,
            filter:function(){
                if(self.inAnimating()){
                    self.model.degress = self._selectedSp.node.angle;
                    //alert('请先停止动画再进行编辑!');
                    editor.gameApp.hideSelectedFlag();
                    return false;
                }
                return true;
            },
            callback:function () {
                if(self._selectedSp){
                    self._selectedSp.node.angle = self.model.degress;
                    editor.gameApp.showSelectedFlag();
                }
            }
        });
        // lst.push({
        //     el:this.rootEl.querySelector('#_visible'),
        //     name:'visible',
        //     domName:'checkbox',
        //     bNumber:false,
        //     callback:function () {
        //         if(self._selectedSp){
        //             self._selectedSp.visible = self.model.visible;
        //             editor.gameApp.scene.showSelectedFlag();
        //         }
        //     }
        // });
        lst.push({
            el:this.rootEl.querySelector('#_holeOrBridge'),
            name:'holeOrBridge',
            domName:'checkbox',
            bNumber:false,
            filter:function(){
                if(self.inAnimating()){
                    self.model.holeOrBridge = !!self._selectedSp.hole;
                    //alert('请先停止动画再进行编辑!');
                    editor.gameApp.hideSelectedFlag();
                    return false;
                }
                return true;
            },
            callback:function () {
                if(self._selectedSp){
                    self._selectedSp.hole = self.model.holeOrBridge;
                    editor.gameApp.showSelectedFlag();
                }
            }
        });
        lst.push({
            el:this.rootEl.querySelector('#_fog'),
            name:'fog',
            domName:'checkbox',
            bNumber:false,
            filter:function(){
                if(self.inAnimating()){
                    self.model.fog = !!self._selectedSp.fog;
                    //alert('请先停止动画再进行编辑!');
                    editor.gameApp.hideSelectedFlag();
                    return false;
                }
                return true;
            },
            callback:function () {
                if(self._selectedSp){
                    self._selectedSp.fog = self.model.fog;
                    editor.gameApp.showSelectedFlag();
                }
            }
        });
        lst.push({
            el:this.rootEl.querySelector('#_lowerZ'),
            name:'lowerZ',
            domName:'checkbox',
            bNumber:false,
            filter:function(){
                if(self.inAnimating()){
                    self.model.lowerZ = !!self._selectedSp.lowerZ;
                    //alert('请先停止动画再进行编辑!');
                    editor.gameApp.hideSelectedFlag();
                    return false;
                }
                return true;
            },
            callback:function () {
                if(self._selectedSp){
                    self._selectedSp.lowerZ = self.model.lowerZ;
                    editor.gameApp.showSelectedFlag();
                }
            }
        });
        lst.push({
            el:this.rootEl.querySelector('#_ax'),
            name:'ax',
            domName:'input',
            bNumber:true,
            filter:function(){
                if(self.inAnimating()){
                    self.model.ax = self._selectedSp.node.anchorX;
                    //alert('请先停止动画再进行编辑!');
                    editor.gameApp.hideSelectedFlag();
                    return false;
                }
                return true;
            },
            callback:function () {
                if(self._selectedSp){
                    self._selectedSp.node.anchorX = self.model.ax;
                    editor.gameApp.showSelectedFlag();
                }
            }
        });
        lst.push({
            el:this.rootEl.querySelector('#_ay'),
            name:'ay',
            domName:'input',
            bNumber:true,
            filter:function(){
                if(self.inAnimating()){
                    self.model.ay = self._selectedSp.node.anchorY;
                    //alert('请先停止动画再进行编辑!');
                    editor.gameApp.hideSelectedFlag();
                    return false;
                }
                return true;
            },
            callback:function () {
                if(self._selectedSp){
                    self._selectedSp.node.anchorY = self.model.ay;
                    editor.gameApp.showSelectedFlag();
                }
            }
        });
        lst.push({
            el:this.rootEl.querySelector('#_alias'),
            name:'alias',
            domName:'input',
            bNumber:false,
            filter:function(){
                let selectedSp = self._selectedSp;
                if(selectedSp && selectedSp.isBattery()){
                    self.model.alias = selectedSp.alias;
                    return false;
                }
                if(self.inAnimating()){
                    self.model.alias = self._selectedSp.alias;
                    editor.gameApp.hideSelectedFlag();
                    //alert('请先停止动画再进行编辑!');
                    return false;
                }
                return true;
            },
            callback:function () {
                if(self._selectedSp){

                    self._selectedSp.alias = self.model.alias;
                    editor.gameApp.showSelectedFlag();

                    // 还需要更新 decoView
                    editor.getDecoView().updateSpAlias(self._selectedSp);
                }
            }
        });
        lst.push({
            el:this.rootEl.querySelector('#_opacity'),
            name:'opacity',
            domName:'input',
            bNumber:true,
            filter:function(){
                if(self.inAnimating()){
                    self.model.opacity = self._selectedSp.node.opacity;
                    //alert('请先停止动画再进行编辑!');
                    editor.gameApp.hideSelectedFlag();
                    return false;
                }
                return true;
            },
            callback:function () {
                if(self._selectedSp){
                    self._selectedSp.node.opacity = self.model.opacity;
                    editor.gameApp.showSelectedFlag();
                }
            }
        });
        // lst.push({
        //     el:this.rootEl.querySelector('#_width'),
        //     name:'width',
        //     domName:'input',
        //     bNumber:true,
        //     filter:function(){
        //         if(self.inAnimating()){
        //             self.model.width = self._selectedSp.width;
        //             //alert('请先停止动画再进行编辑!');
        //             editor.gameApp.hideSelectedFlag();
        //             return false;
        //         }
        //         return true;
        //     },
        //     callback:function () {
        //         if(self._selectedSp){
        //             self._selectedSp.width = self.model.width;
        //             editor.gameApp.showSelectedFlag();
        //         }
        //     }
        // });
        // lst.push({
        //     el:this.rootEl.querySelector('#_height'),
        //     name:'height',
        //     domName:'input',
        //     bNumber:true,
        //     filter:function(){
        //         if(self.inAnimating()){
        //             self.model.height = self._selectedSp.height;
        //             //alert('请先停止动画再进行编辑!');
        //             editor.gameApp.hideSelectedFlag();
        //             return false;
        //         }
        //         return true;
        //     },
        //     callback:function () {
        //         if(self._selectedSp){
        //             self._selectedSp.height = self.model.height;
        //             editor.gameApp.showSelectedFlag();
        //         }
        //     }
        // });
        this.model = {};
        lst.forEach(item=>{
            doubleBind(this.model,item);
        });

        // 单独绑定一下 sx sy
        Object.defineProperty(this.model,'sx',{
            enumerable:true,
            configurable:true,
            get(){
                if(self._selectedSp){
                    return self._selectedSp.node.scaleX;
                }
                return 1;
            },
            set(value){
                if(self._selectedSp){
                    self._selectedSp.node.scaleX = value;
                }
            }
        });

        Object.defineProperty(this.model,'sy',{
            enumerable:true,
            configurable:true,
            get(){
                if(self._selectedSp){
                    return self._selectedSp.node.scaleY;
                }
                return 1;
            },
            set(value){
                if(self._selectedSp){
                    self._selectedSp.node.scaleY = value;
                }
            }
        });
    }

    reset() {
        this.model.x = 0;
        this.model.y = 0;
        this.model.zIndex = 0;
        this.model.degress = 0;
        this.model.holeOrBridge = false;
        this.model.fog = false;
        this.model.lowerZ = false;
        this.model.ax = 0.5;
        this.model.ay = 0.5;
        this.model.alias = '';
        this.model.opacity = 255;
        this.model.width = 0;
        this.model.height = 0;

        // this.model.anims = {
        //     tempId:1, //  动画模板Id
        //     time:1.0,  // 时间
        //     dx:1, // rotate的时候只有一个值是有用的
        //     dy:1,
        // };

        // 未绑定的类型
        this.model.anims = null;

        // 单独进行绑定
        this.model.sx = 1;
        this.model.sy = 1;
    }

    _sp_to_model(sp){
        this.model.x = sp.node.x;
        this.model.y = sp.node.y;
        this.model.zIndex = sp.node.zIndex;
        this.model.degress =  sp.node.angle;
        this.model.holeOrBridge = !!sp.hole;
        this.model.fog = !!sp.fog;
        this.model.lowerZ = !!sp.lowerZ;
        this.model.ax = sp.node.anchorX;
        this.model.ay = sp.node.anchorY;
        this.model.alias = sp.alias || '';
        this.model.opacity = sp.node.opacity;
        this.model.width = sp.node.width;
        this.model.height = sp.node.height;

        // TODO: 将sp身上的动画属性->给model
        this.model.sx = sp.node.scaleX;
        this.model.sy = sp.node.scaleY;

        this.model.anims = sp.anims;

        this.inspAnimView.updateUI(this.model.anims);
    }

    // _model_tp_sp(){
    //     if(!this._selectedSp){
    //         return;
    //     }
    //     let sp = this._selectedSp;
    //     sp.x = this.model.x;
    //     sp.y = this.model.y;
    //     sp.zIndex = this.model.zIndex
    // }

    _onBtnDelete(){

        if(!this._selectedSp){
            settings.alert('请先选择要删除的元素');
            return;
        }

        if( this._selectedSp.alias === settings.default_battery_1 ||
            this._selectedSp.alias === settings.default_battery_2){
            return;
        }
        if(settings.showConfirmDialog('确定删除此装饰?')){
            // 删除
            let mapScene = editor.gameApp;
            mapScene.delDecoSp();
        }
    }

    updateInspectView(sp){

        if(sp){
            this._selectedSp = sp;

            // 显示此面板
            this.showPanel();

            editor.gameApp.showSelectedFlag();

            // 更新UI
            this._sp_to_model(sp);

        }else{
            this._selectedSp = null;
            this.hidePanel();
            editor.gameApp.hideSelectedFlag();
        }
    }

    getSelectedSp(){
        return this._selectedSp;
    }

    hidePanel(){
        this.inspectContentEl.classList.remove('show');
        this.inspectContentEl.classList.add('hide');
        // this.bEditorAnchor = false;
        // this.editorAnchorEl.checked = false;
    }

    showPanel(){
        this.inspectContentEl.classList.remove('hide');
        this.inspectContentEl.classList.add('show');
    }

    getModel(){
        return this.model;
    }

    inAnimating(){
        if(this._selectedSp){
            let actionMgr = cc.director.getActionManager();
            let action = actionMgr.getActionByTag(G.Tags.DecoBaseAction,this._selectedSp.node);
            return !!action;
        }
        return false;
    }
}

module.exports = InspectView;
